<template>
  <div class="scenicinfo">
    <div class="scenicinfo_left">
      <div
        style="
          margin-left: 20px;
          margin-top: 30px;
          font-weight: 700;
          font-size: 18px;
          color: rgb(64, 158, 255);
        "
      >
        新增景点
      </div>
      <div style="margin-left: 30px; margin-top: 25px">
        <div style="font-weight: 700; color: rgb(111, 123, 135)">封面上传</div>
        <el-upload
          class="upload-demo"
          drag
          action="string"
          :show-file-list="false"
          style="margin-top: 20px; margin-left: 10px"
          :before-upload="beforeCoverUpload"
          :http-request="uploadImg"
        >
          <img :src="scenic.scenicCoverUrl" height="100%" width="100%" />
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过5MB
          </div>
        </el-upload>

        <div class="scenicinfo_left_bottom">
          <div
            style="
              font-weight: 700;
              margin-top: 35px;
              color: rgb(111, 123, 135);
            "
          >
            攻略上传
          </div>
          <el-upload
            class="upload-demo"
            action="string"
            :show-file-list="false"
            :before-upload="beforeStrategyUpload"
            :http-request="uploadStrategy"
            style="margin-top: 30px; margin-left: 10px"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="margin-top: 20px">
              只能上传PDF文件，且不超过50MB
            </div>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="scenicInfo_right">
      <div
        style="font-weight: 700; color: rgb(111, 123, 135); margin-top: 75px"
      >
        景点信息
      </div>

      <el-form
        ref="form"
        :model="form"
        type="flex"
        style="margin-top: 35px !important"
        label-width="80px"
      >
        <el-form-item label="景点名称" style="width: 400px">
          <el-input v-model="scenic.scenicName"></el-input>
        </el-form-item>

        <el-form-item label="景点类型">
          <el-select
            v-model="scenic.scenicType"
            placeholder="请选择景点类型"
            style="width: 320px"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 20px !important" label="景点描述">
          <el-input
            type="textarea"
            :rows="7"
            v-model="scenic.scenicDescription"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 50px !important">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uploadImg } from "@/api/scenic";
import { uploadStrategy } from "@/api/scenic";
import { addScenicspot } from "@/api/scenic";
export default {
  data() {
    return {
      options: [
        {
          value: "名胜古迹",
          label: "名胜古迹",
        },
        {
          value: "自然风景",
          label: "自然风景",
        },
        {
          value: "人文地理",
          label: "人文地理",
        },
        {
          value: "山水奇观",
          label: "山水奇观",
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      scenic: {
        scenicId: "",
        scenicName: "",
        scenicType: "",
        scenicDescription: "",
        scenicCoverUrl:
          "http://r7futd8xx.hn-bkt.clouddn.com/64HI6wqEGUS7ktnr.jpg",
        strategyUrl: "",
        createBy: 1,
      },
    };
  },
  methods: {
    onSubmit() {
      addScenicspot(this.scenic).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          (this.scenic.scenicId = ""),
            (this.scenic.scenicName = ""),
            (this.scenic.scenicType = ""),
            (this.scenic.scenicDescription = ""),
            (this.scenic.scenicCoverUrl =
              "http://r7futd8xx.hn-bkt.clouddn.com/64HI6wqEGUS7ktnr.jpg"),
            (this.scenic.strategyUrl = "");
        }
      });
      console.log("submit!");
    },
    /* 上传封面前的准备 */
    beforeCoverUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" ||
        testmsg === "JPG" ||
        testmsg === "jpeg"||
        testmsg === "png" ||
        testmsg === "PNG";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!extension) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return extension || isLt5M;
    },
    /* 上传策略前的准备 */
    beforeStrategyUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "pdf" || testmsg === "PDF";

      const isLt50M = file.size / 1024 / 1024 < 50;

      if (!extension) {
        this.$message.error("上传头像图片只能是 PDF 格式!");
      }
      if (!isLt50M) {
        this.$message.error("上传头像图片大小不能超过 50MB!");
      }
      return extension || isLt50M;
    },
    uploadImg(param) {
      const formdata = new FormData();
      // formdata.append("id", 1);
      formdata.append("file", param.file);
      uploadImg(formdata).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.scenic.scenicCoverUrl = res.data;
        console.log(res);
      });
    },
    uploadStrategy(param) {
      const formdata = new FormData();
      // formdata.append("id", 1);
      formdata.append("file", param.file);
      uploadStrategy(formdata).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
        this.scenic.strategyUrl = res.data;
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.scenicinfo {
  display: flex;
  width: 1000px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  height: 550px;
}

.scenicinfo_left {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.scenicinfo_left_bottom {
  margin-top: 50px;
}
.scenicInfo_right {
  display: flex;
  flex-direction: column;
}
</style>